<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="employeeInfoBox">
        <!-- <el-row class="itemTitle editIcon">
                    提报信息
                </el-row> -->
        <div class="secondaryTitle secondaryTitleTheme">提报信息</div>
        <el-row>
          <el-col :span="16">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >姓名：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.name || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >身份证号：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.idcard || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >证书编号：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.certificateNumber || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >发证日期：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.effectiveStartDate || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="text-align: center" class="readIdCardBox">
            <img
              :src="employeeInfo.imgPath ? employeeInfo.imgPath : errorPath"
              style="width: 100px"
            />
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <div class="applyInfoBox">
        <!-- <el-row class="itemTitle yellow">
                    附件资料
                </el-row> -->
        <div class="secondaryTitle secondaryTitleTheme">附件资料</div>
        <el-row class="detailInfoItemSty">
          <el-col :span="10" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >证书附件：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">
              <span v-if="employeeInfo.attachmentFiles.length > 0">
                <span>已上传</span>
                <el-link class="seeFile" @click="toUploadLaborFile()"
                  >查看</el-link
                >
                <contractEnclosureDialog
                  v-if="uploadLaborFile"
                  dialogTitle="证书附件"
                  :tableData="employeeInfo.attachmentFiles"
                  @closeDialog="hiddenLaborDialog"
                ></contractEnclosureDialog>
              </span>
              <span v-else>未上传</span>
            </span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="10" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >任命书：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">
              <span v-if="employeeInfo.empAppointFiles.length > 0">
                <span>已上传</span>
                <el-link class="seeFile" @click="toEmpAppointFile()"
                  >查看</el-link
                >
                <contractEnclosureDialog
                  v-if="empAppointFile"
                  dialogTitle="证书附件"
                  :tableData="employeeInfo.empAppointFiles"
                  @closeDialog="hiddenEmpAppointDialog"
                ></contractEnclosureDialog>
              </span>
              <span v-else>未上传</span>
            </span>
          </el-col>
        </el-row>
      </div>
      <el-row class="btnBox">
        <el-button
          size="medium"
          class="saveBtn submitBtn"
          @click="submitForm()"
          :loading="auditSubmit"
          >审核通过</el-button
        >
        <el-button
          size="medium"
          class="cancelBtn rejectFrom"
          @click="rejectFrom()"
          >驳回</el-button
        >
        <el-button size="medium" class="cancelBtn" @click="goBack()"
          >取消</el-button
        >
      </el-row>
    </div>
    <!-- 驳回弹框 -->
    <el-dialog
      title="驳回"
      :visible.sync="formVisibleReject"
      :close-on-click-modal="false"
      @close="closeDialog"
      class="tipDialog"
      width="420px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formDataReject"
        label-width="120px"
        :rules="formRulesReject"
        ref="formDataReject"
      >
        <el-form-item
          label="驳回原因："
          class="row-padding-bottom"
          prop="reason"
        >
          <el-input
            type="textarea"
            rows="3"
            placehoder="请输入驳回原因，提交后将短信通知项目"
            v-model="formDataReject.reason"
            @blur="formDataReject.reason = changeValue($event)"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="submitRejectSave"
          :loading="regectSubmit"
          v-sdc
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'laborAuditCz',
  data() {
    return {
      titleText: '劳资专员资质审核',
      errorPath: require('../../../static/img/employee/card.png'),
      auditSubmit: false,
      regectSubmit: false,
      id: '', //列表id
      back: true,
      employeeInfo: {
        files: [],
      },
      uploadLaborFile: false, //劳资证书附件
      formVisibleReject: false, //驳回弹框
      formDataReject: {
        reason: '',
      },
      formRulesReject: {
        reason: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: 'change',
          },
        ],
      },
      creatorId: '', //创建人id
      empAppointFile: false, //任命书附件
    }
  },
  created() {
    this.id = this.$route.query.id
    //获取企业详情
    this.getCompanyDetail()
  },
  methods: {
    getCompanyDetail() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/expand/detail',
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.employeeInfo = res.data.result
            this.creatorId = this.employeeInfo.creatorId
          } else {
            this.$message({
              showClose: true,
              message: '加载审核信息失败',
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    //审核通过
    submitForm() {
      this.$confirm(
        '是否确认审核通过？通过审核后将展示到劳资专管员页面！',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.auditSubmit = true
          this.checkRequset()
        })
        .catch(() => {
          //取消
        })
    },
    //通过请求
    checkRequset() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/expand/audit',
        data: {
          creatorId: this.creatorId,
          id: this.id,
          auditStatus: '1', //1通过
        },
      })
        .then(
          (res) => {
            this.auditSubmit = false
            if (!res.data.hasError) {
              this.$message({
                message: '审核通过',
                type: 'success',
              })
              //跳转审核详情页
              this.$router.push({
                name: 'laborAuditDetailCz',
                path: '/home/employee/laborAuditDetailCz',
                query: {
                  id: this.id,
                },
              })
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/employee/laborInfoAuditCz',
                newUrl: this.$router.currentRoute.fullPath,
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.auditSubmit = false
            this.$message({
              message: '审核失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //驳回
    rejectFrom() {
      this.formVisibleReject = true
    },
    //页面返回
    goBack() {
      this.$router.push('/home/employee/laborInfoAuditCz')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/laborInfoAuditCz',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toUploadLaborFile() {
      this.uploadLaborFile = true
    },
    hiddenLaborDialog() {
      this.uploadLaborFile = false
    },
    handleClose() {
      this.formVisibleReject = false
      this.$refs['formDataReject'].resetFields()
    },
    //驳回保存
    submitRejectSave() {
      this.regectSubmit = true
      this.$refs.formDataReject.validate((valid) => {
        if (valid) {
          this.rejectRequset()
        } else {
          this.regectSubmit = false
          return false
        }
      })
    },
    rejectRequset() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/expand/audit',
        data: {
          creatorId: this.creatorId,
          id: this.id,
          auditStatus: '2',
          rejectReason: this.formDataReject.reason,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.formVisibleReject = false
            this.$message({
              message: '驳回成功',
              type: 'success',
            })
            this.regectSubmit = false
            //驳回成功跳转到详情页
            this.$nextTick(() => {
              //跳转审核详情页
              this.$router.push({
                name: 'laborAuditDetailCz',
                path: '/home/employee/laborAuditDetailCz',
                query: {
                  id: this.id,
                },
              })
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/employee/laborInfoAuditCz',
                newUrl: this.$router.currentRoute.fullPath,
              })
            })
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
            this.regectSubmit = false
          }
        })
        .catch((error) => {
          this.regectSubmit = false
        })
    },
    // 任命书查看
    toEmpAppointFile() {
      this.empAppointFile = true
    },
    hiddenEmpAppointDialog() {
      this.empAppointFile = false
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding: 0;
  height: calc(100% - 67px);
  .itemTitle {
    font-size: 18px;
    border-bottom: 1px solid #dee5f4;
    line-height: 50px;
  }
  .employeeInfoBox,
  .applyInfoBox {
    padding: 20px 24px;
    .itemInfo {
      padding-top: 20px;
      font-size: 14px;
      .labelWidth {
        width: 126px;
        text-align: right;
        display: inline-block;
        color: #666;
      }
      .information {
        color: #151515;
      }
    }
  }
  .applyInfoBox {
    .yellow {
      color: #f9a243;
    }
  }
  .btnBox {
    margin-top: 20px;
    text-align: center;
  }
  .rejectFrom {
    background: #3e5265 !important;
    color: #fff !important;
  }
}
.el-link {
  line-height: 16px !important;
}
</style>
